<template>
	<view>
		<!-- 头部 -->
		<uni-nav-bar   left-icon="left" leftText="返回" title="添加居民" @clickLeft="$utils.ret()" leftWidth='200rpx' rightWidth='200rpx'/>

		<!-- 居民信息 -->
		<view class="inmate_messge">
			居民信息
		</view>
		<!-- 具体信息 -->
		<view class="information">
			<view class="LouDong">
				<view class="room_num">
					楼栋房号
				</view>
				<view class="building">
					<span>请选择楼栋类型</span><i class="iconfont icon-dayuhao da"></i>
				</view>
			</view>
			<!-- 姓名 -->
			<view class="user_name">
				<view class="username">
					姓名
				</view>
				<view class="name">
					<input type="text" placeholder="请填写姓名" />
				</view>
			</view>
			<!-- 身份证号 -->
			<view class="ID_num">
				<view class="id_number">
					身份证号
				</view>
				<view class="number">
					<input type="text" placeholder="请填写身份证号" />
				</view>
			</view>
			<!-- 性别 -->
			<view class="gender_box">
				<view class="gender">
					性别
				</view>
				<view class="sex">
					<span>请选择性别</span><i class="iconfont icon-dayuhao hao"></i>
				</view>
			</view>
			<!-- 联系电话 -->
			<view class="moblie">
				<view class="tel">
					联系电话
				</view>
				<view class="tel_num">
					<input type="text" placeholder="请填写联系电话" />
				</view>
			</view>
			<button class="btn" @click="gos">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
              gos(){
				  uni.redirectTo({
				  	url:'/pages/family_num/family_num'
				  })
			  }
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100vh;
	}


	/deep/.uni-navbar__content {
		border: none;
	}

	/deep/.uni-nav-bar-text {
		font-size: 25rpx !important;
	}
	/deep/.uni-navbar-btn-text span{
		font-size: 20rpx !important;
	}
	.inmate_messge {
		height: 70rpx;
		color: #000000;
		font-size: 25rpx;
		line-height: 70rpx;
		padding-left: 30rpx;
		background-color: #f0f0f0;
	}

	/* 具体信息 */
	.information {
		height: 100%;
		background-color: white;

	}

	/* 楼栋房号 */
	.LouDong {
		line-height: 105rpx;
		justify-content: space-between;
		display: flex;
		border-bottom: 1px solid #f0f0f0;
		margin: 0 10rpx;
	}

	.room_num {
		height: 110rpx;
		font-size: 25rpx;
		color: #000000;
		padding-left: 20rpx;
		line-height: 110rpx;
	}

	.building {
		height: 110rpx;
		line-height: 110rpx;
		font-size: 25rpx;
		padding-right: 35rpx;
	}

	.building span {
		color: #ababab;
	}

	.building i {
		padding-left: 20rpx;
		font-size: 25rpx;
		color: #ababab;
	}

	.da {
		font-size: 25rpx;
	}

	/* 姓名 */
	.user_name {
		line-height: 105rpx;
		justify-content: space-between;
		display: flex;
		border-bottom: 1px solid #f0f0f0;
		margin: 0 10rpx;
	}

	.username {
		height: 105rpx;
		font-size: 25rpx;
		color: #000000;
		padding-left: 20rpx;
		line-height: 105rpx;
	}

	.name {
		height: 105rpx;
		padding-right: 35rpx;
		width: 170rpx;
	}

	.name input {
		height: 105rpx;
		line-height: 105rpx;
		font-size: 25rpx;
	}

	/* 身份证号 */
	.ID_num {
		line-height: 105rpx;
		justify-content: space-between;
		display: flex;
		border-bottom: 1px solid #f0f0f0;
		margin: 0 10rpx;
	}

	.id_number {
		height: 105rpx;
		font-size: 25rpx;
		color: #000000;
		padding-left: 20rpx;
		line-height: 105rpx;
	}

	.number {
		height: 105rpx;
		padding-right: 35rpx;
		width: 210rpx;
	}

	.number input {
		height: 105rpx;
		line-height: 105rpx;
		font-size: 25rpx;
	}

	/* 性别 */
	.gender_box {
		line-height: 105rpx;
		justify-content: space-between;
		display: flex;
		border-bottom: 1px solid #f0f0f0;
		margin: 0 10rpx;
	}

	.gender {
		height: 110rpx;
		font-size: 25rpx;
		color: #000000;
		padding-left: 20rpx;
		line-height: 110rpx;
	}

	.sex {
		height: 110rpx;
		line-height: 110rpx;
		font-size: 25rpx;
		padding-right: 35rpx;
	}

	.sex span {
		color: #ababab;
	}

	.sex i {
		padding-left: 20rpx;
		font-size: 25rpx;
		color: #ababab;
	}

	.hao {
		font-size: 25rpx;
	}

	/* 联系电话 */
	.moblie {
		line-height: 110rpx;
		justify-content: space-between;
		display: flex;
		margin: 0 10rpx;
	}

	.tel {
		height: 110rpx;
		font-size: 25rpx;
		color: #000000;
		padding-left: 20rpx;
		line-height: 110rpx;
	}

	.tel_num {
		height: 105rpx;
		padding-right: 35rpx;
		width: 210rpx;
	}
	.tel_num input {
		height: 105rpx;
		line-height: 105rpx;
		font-size: 25rpx;
	}
	
	.btn {
		width:515rpx ;
		height:75rpx ;
		color: white;
		background-color:#5da5f1 ;
		border-radius: 50rpx;
		line-height: 75rpx;
		margin-top: 120rpx;
	}
</style>